<template>
	<view class="test-page">
		<Navbar title="接口测试页面2" />

		<view class="test-content">
			<view class="test-section">
				<text class="section-title">接口测试</text>
				<button @click="testApi" class="test-btn">发起测试请求</button>
			</view>

			<view class="test-section">
				<text class="section-title">返回结果</text>
				<view class="result-display">
					<text v-if="loading" class="loading-text">请求中...</text>
					<text v-else-if="error" class="error-text" @longpress="copyText(error)">{{ error }}</text>
					<text v-else-if="response" class="response-text" @longpress="copyText(response)">{{ response }}</text>
					<text v-else class="placeholder-text">点击上方按钮发起请求</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import Navbar from '@/components/Navbar.vue';
import { createRequest } from '@/utils/request';
import { useGlobalStore } from '@/store/app';

// 获取store
const store = useGlobalStore();

// 响应式数据
const loading = ref(false);
const response = ref('');
const error = ref('');

// 获取userId
const userId = computed(() => store.userInfo.userId);
// 1955083397222449154
const startTime = '2025-08-01 00:00:00'
const endTime = '2025-08-30 23:59:59'
// 复制文本功能
const copyText = (text) => {
	uni.setClipboardData({
		data: text,
	});
};

// 测试接口请求
const testApi = async () => {
	loading.value = true;
	error.value = '';
	response.value = '';

	try {
		const result = await createRequest(`/alert/getRangeAlertList`);

		response.value = JSON.stringify(result, null, 2);
		console.log('接口返回:', result);
	} catch (err) {
		console.log(err);
		error.value = err.message || '请求失败';
	} finally {
		loading.value = false;
	}
};
</script>

<style scoped lang="scss">
.test-page {
	@include page-with-header;
	min-height: 100vh;
	background: #172869;
}

.test-content {
	display: flex;
	flex-direction: column;
	gap: 40rpx;
}

.test-section {
	background: #2e3d78;
	border-radius: 16rpx;
	padding: 32rpx;
	border: 1rpx solid #50daff;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 24rpx;
	display: block;
}

.connection-status {
	background: rgba(255, 193, 7, 0.1);
	border: 1rpx solid #ffc107;
	color: #ffc107;
	padding: 16rpx;
	border-radius: 8rpx;
	margin-bottom: 24rpx;
	text-align: center;
	font-size: 28rpx;
}

.test-btn {
	background: linear-gradient(90deg, #1ec8e1 0%, #5ebeff 100%);
	color: #fff;
	border: none;
	border-radius: 12rpx;
	padding: 20rpx 32rpx;
	margin: 12rpx 0;
	font-size: 28rpx;
	font-weight: bold;
	width: 100%;
}

.test-btn:active {
	transform: scale(0.98);
}

.result-display {
	min-height: 200rpx;
	padding: 24rpx;
	background: #1a2a5a;
	border-radius: 12rpx;
	border: 1rpx solid #50daff;
	margin-top: 16rpx;
}

.loading-text {
	color: #50daff;
	font-size: 28rpx;
	text-align: center;
	display: block;
}

.error-text {
	color: #ff6b6b;
	font-size: 28rpx;
	line-height: 1.6;
	white-space: pre-wrap;
	display: block;
	user-select: text;
	cursor: pointer;
}

.response-text {
	color: #4fd2ff;
	font-size: 24rpx;
	line-height: 1.6;
	white-space: pre-wrap;
	display: block;
	font-family: 'Courier New', monospace;
	user-select: text;
	cursor: pointer;
}

.placeholder-text {
	color: #b0b8d0;
	font-size: 28rpx;
	text-align: center;
	display: block;
}
</style>
